<template>
  <div>
    <div>
      <c-table-box
        ref="cTableBox"
        hide-func
        checkbox
        :other-filters="otherFilters"
        :table-config="tableConfig"
        @selection-change="selectionChange"
      >
        <template #btn>
          <c-permission v-if="type==='all'" code="all" />
          <c-permission v-if="type==='awaitRectify'" code="awaitRectify">
            <c-button opt-code="upload" type="primary" @click="handleAudit('uploadRectifyFile')">上传整改资料</c-button>
            <c-button opt-code="delay" type="primary" @click="handleDelay">申请延期</c-button>
          </c-permission>
          <c-permission v-if="type==='rectifyAudit'" code="rectifyAudit">
            <c-button opt-code="auditApply" type="primary" @click="handleAudit('1')">审核</c-button>
          </c-permission>
        </template>
      </c-table-box>
    </div>
    <delay-form
      v-if="showDelayPage"
      ref="refAuditDlg"
      :detail="detailData"
      :visible.sync="showDelayPage"
      @success="refreshTable"
    />
    <!-- <Detail v-if="showDetail" ref="refEditDlg" :detail-data="activeRowData" :visible.sync="showDetail" /> -->
  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
import delayForm from './components/Delay.vue'
export default {
  name: 'List',
  components: { delayForm },

  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDetail: false,
      exportVisible: false,
      typeFilters: [],
      detailData: {},
      id: '',
      loading: false,
      showEdit: false,
      // showInformation: false,
      activeRowData: {},
      showDelayPage: false,
      tableSelected: [], // 当前所选中表格行数据
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/patrolQuestionRectify/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        apiHeader: {
          'Permission-perCode': 'problem_rectify',
          'Permission-App': 'slm'
        },
        // sort: 'createTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'rectifyNo',
            label: '走访整改任务号',
            minWidth: '110',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'schedule',
            label: '走访整改进度',
            minWidth: '110',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PATROL_QUESTION_STATUS'
            }
          },
          {
            prop: 'patrolTaskNo',
            label: '走访任务号',
            minWidth: '130'
          },
          {
            prop: 'classification',
            label: '整改问题分类',
            minWidth: '110',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'RECTIFICATION_CLASSIFICATION'
            }
          },
          {
            prop: 'customerCode',
            label: '客户编码',
            minWidth: '110'
          },
          {
            prop: 'customerName',
            label: '客户名称',
            minWidth: '110'
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '110'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '110'
          },
          {
            prop: 'shopArea',
            label: '门店档案面积',
            minWidth: '110'
          },
          {
            prop: 'officeLinkMan',
            label: '办事处主管',
            minWidth: '110'
          },
          {
            prop: 'finishedManagerName',
            label: '成品客户经理',
            minWidth: '110'
          },
          {
            prop: 'customManagerName',
            label: '定制客户经理',
            minWidth: '110'
          },
          {
            prop: 'lateCompletionDate',
            label: '整改完成时间',
            minWidth: '120',
            render: function(createElement, rows) {
              if (rows.lateCompletionDate) {
                return (<div>
                  {rows.lateCompletionDate.slice(0, 10)}
                </div>
                )
              }
              return ''
            }
          },
          {
            prop: 'personName',
            label: '走访人员',
            minWidth: '110'
          }
        ]
      }
    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters]
    },
    selectedIds() {
      return this.tableSelected.map(row => {
        return row.id
      })
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setOtherFilters(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.refreshTable('')
      }
    }
  },
  activated() {
    if (this.ready && this.refreshTable) {
      this.refreshTable()
    }
  },
  deactivated() {
    this.ready = true
  },
  created() {
  },
  methods: {
    handleUpload() {

    },
    handleDelay() {
      if (!this.singleJudge(this.tableSelected, '操作', true)) {
        return
      }
      this.detailData = this.tableSelected[0]
      this.showDelayPage = true
    },
    selectionChange(v) {
      this.tableSelected = v
    },

    // 导出
    handleExport() {
      this.exportVisible = true
    },
    handleDetail(val) {
      this.$router.push({ name: 'PatrolRectify', query: { id: val.id, patrolId: val.patrolId, isDetail: 1,
        shopCode: val.shopCode, schedule: val.schedule, classification: val.classification, planCompletionDate: val.planCompletionDate, rectifyNo: val.rectifyNo }})
    },

    // 设置过滤条件
    setOtherFilters(v) {
      switch (v) {
        case 'all':
          this.typeFilters = []
          break
        case 'awaitRectify':
          this.typeFilters = [otherFiltersItem('schedule', 'A', '=')]
          break
        case 'rectifyAudit':
          this.typeFilters = [otherFiltersItem('schedule', 'B', '=')]
          break
      }
    },
    // 审核合同
    handleAudit(type) {
      if (!this.singleJudge(this.tableSelected, '操作', true)) {
        return
      }
      this.$router.push({ name: 'PatrolRectify', query: { id: this.tableSelected[0].id, patrolId: this.tableSelected[0].patrolId, type, shopCode: this.tableSelected[0].shopCode, schedule: this.tableSelected[0].schedule, classification: this.tableSelected[0].classification, planCompletionDate: this.tableSelected[0].planCompletionDate, rectifyNo: this.tableSelected[0].rectifyNo }})
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.$nextTick(() => {
        this.$refs.cTableBox.initTableData(v)
      })
    },

    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    }
  }
}
</script>
